<template>
  <full-page :options="options" id="fullpage" ref="fullpage">
    <div class="section">
      <swiper class="type-swiper-container" :options="swiperOptions">
        <swiper-slide v-for="(bannerItem, i) in bannerList" :key="i" :index="i">
          <div class="swiper-item" @click="toVideo(bannerItem.id)">
            <el-image
              class="image"
              :src="bannerItem.image"
              v-if="i == i"
              fit="contain"
            >
            </el-image>
          </div>
        </swiper-slide>
      </swiper>
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <VideoList
            ref="mostWatch"
            :isTotality="isTotality"
            :showTitle="true"
            :title="title"
            :listSize="6"
          ></VideoList>
        </el-col>
      </el-row>
    </div>

    <div class="section section2">
      <div class="page-video-list">
        <div class="page-left-list">
          <h3 style="margin-left: 15px">{{ TabVideoListTitle }}</h3>
          <div class="tabListContainer">
            <TabVideoList ref="tabVideoList1" />
            <TabVideoList ref="tabVideoList2" />
            <el-pagination
              @current-change="currentChange"
              class="pagination"
              background
              layout="prev, pager, next"
              :total="100"
            >
            </el-pagination>
          </div>
        </div>

        <div class="page-right-recomd">
          <BroadsideList
            style="margin-top: 20px"
            ref="broadsideList"
            :listSize="5"
          />
        </div>
      </div>
    </div>
  </full-page>
</template>

<script>
//页面引入swiper
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import VideoList from "@/component/videoList.vue";
import BroadsideList from "@/component/broadsideList.vue";
import TabVideoList from "@/component/tabVideoList.vue";
import { getRandomVideo } from "../api/videoApi";
export default {
  components: {
    swiper,
    swiperSlide,
    VideoList,
    BroadsideList,
    TabVideoList,
  },
  watch: {
    //解决路由中的参数改变，路由地址不改变页面数据不刷新问题
    $route(to, from) {
      if (this.$route.query.typeId) {
        this.getBannerList();
        this.$refs.mostWatch.getRandomVideo();
        this.$refs.tabVideoList1.getRandomVideo();
        this.$refs.tabVideoList2.getRandomVideo();
        this.$refs.broadsideList.getRandomVideo();
      }
    },
  },
  data() {
    return {
      channelId: "",
      showBanner: false,
      title: "最多人看",
      TabVideoListTitle: "近期更新",
      bannerList: [{}, {}, {}, {}, {}, {}],
      mostWatch: [],
      typeVideoList: [],
      options: {},
      isPart: true,
      isTotality: true,
      options: {
        resize: true,
      },
      swiperOptions: {
        loopAdditionalSlides: 1,
        loop: false,
        centeredSlides: true, //设置活动块居中
        autoplay: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 2000,
        },
        slidesPerView: 3, //设置slider容器能够同时显示的slides数量(carousel模式)。
      },
    };
  },
  methods: {
    getBannerList() {
      getRandomVideo(6)
        .then((res) => {
          this.bannerList = res.data.data.rows;
          this.showBanner = true;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    currentChange() {
      this.$refs.tabVideoList1.getRandomVideo(4);
      this.$refs.tabVideoList2.getRandomVideo(4);
    },
    toVideo(id) {
      this.$router.push({
        name: "video",
        query: {
          id: id,
        },
      });
    },
  },
  mounted() {
    this.getBannerList();
  },
  created() {
    this.channelId = this.$route.query.typeId;
  },
  updated() {},
};
</script>

<style lang="scss" scoped>
.type-swiper-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.type-swiper-container .swiper-item {
  object-fit: contain;
}

.page-video-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  justify-content: space-between;

  .page-left-list {
    width: 80%;
  }

  .page-right-recomd {
    width: 20%;
  }
}

.tabListContainer {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  justify-content: space-between;
}

.section2 {
  margin-top: 20px;
}

.pagination {
  margin-left: 900px;
}

.image {
  width: 100%;
  height: 100%;
}
</style>
